<template>
  <div class="app">
    <Loading v-if="captchaFlag"></Loading>
    <div v-else class="box">
      <img class="wave" src="@/assets/images/login/bg.png" alt="" />
      <div class="login-container">
        <div class="img">
          <svg
            data-v-371e2d49=""
            xmlns="http://www.w3.org/2000/svg"
            width="500"
            height="380"
            data-name="Layer 1"
            viewBox="0 0 871 477"
          >
            <path
              fill="#f2f2f2"
              d="M158.585 473.32A141.78 141.78 0 0 1 52.532 333.926c.122-7.912.954-15.99 4.28-23.17s9.504-13.39 17.232-15.092c8.434-1.856 17.333 1.94 23.618 7.861s10.407 13.736 14.198 21.495c22.838 46.734 40.19 96.88 46.686 148.489Z"
            ></path>
            <path
              fill="#fff"
              d="m70.217 297.224 16.006 36.367 16.007 36.367c5.069 11.517 10.128 23.04 15.368 34.481 5.193 11.341 10.565 22.604 16.295 33.684 5.722 11.065 11.804 21.95 18.405 32.516q1.233 1.973 2.49 3.932c.58.904 2.03.065 1.446-.846-6.728-10.487-12.927-21.305-18.741-32.323-5.82-11.03-11.261-22.258-16.5-33.575-5.268-11.377-10.332-22.846-15.384-34.32L89.661 337.27l-16.006-36.367-1.992-4.525c-.433-.985-1.876-.133-1.446.845Z"
            ></path>
            <path
              fill="#f2f2f2"
              d="M151.908 473.573a82.967 82.967 0 0 1-92.692-43.741c-2.073-4.14-3.822-8.56-4.033-13.185s1.32-9.518 4.872-12.487c3.878-3.24 9.523-3.673 14.385-2.295s9.11 4.322 13.174 7.327c24.473 18.098 47.02 39.449 64.325 64.49Z"
            ></path>
            <path
              fill="#fff"
              d="m58.49 406.002 18.127 14.56 18.128 14.56c5.741 4.612 11.479 9.228 17.288 13.754 5.758 4.486 11.587 8.883 17.553 13.09 5.958 4.199 12.054 8.208 18.334 11.912q1.173.692 2.354 1.369c.546.313 1.072-.514.523-.83-6.324-3.628-12.463-7.57-18.457-11.722-6-4.155-11.855-8.515-17.63-12.977-5.806-4.484-11.532-9.072-17.252-13.666q-9.032-7.252-18.062-14.507l-18.128-14.56-2.256-1.812c-.49-.394-1.01.438-.522.83Z"
            ></path>
            <path
              fill="#f2f2f2"
              d="M720.281 472.41a197.72 197.72 0 0 0 147.895-194.391c-.17-11.034-1.33-22.299-5.968-32.312s-13.254-18.673-24.03-21.045c-11.762-2.59-24.173 2.703-32.938 10.962s-14.512 19.155-19.8 29.976c-31.848 65.172-56.045 135.102-65.105 207.072Z"
            ></path>
            <path
              fill="#fff"
              d="m843.513 226.836-22.32 50.715-22.322 50.716c-7.07 16.061-14.125 32.13-21.431 48.086-7.243 15.815-14.734 31.52-22.725 46.973-7.98 15.43-16.46 30.61-25.666 45.344q-1.72 2.752-3.473 5.483c-.81 1.261-2.832.092-2.017-1.178 9.382-14.626 18.028-29.712 26.136-45.077 8.117-15.383 15.704-31.04 23.01-46.82 7.346-15.867 14.409-31.861 21.453-47.863q11.122-25.265 22.24-50.531l22.321-50.715 2.778-6.312c.604-1.372 2.617-.185 2.016 1.179Z"
            ></path>
            <path
              fill="#f2f2f2"
              d="M729.593 472.762a115.7 115.7 0 0 0 129.262-60.998c2.89-5.775 5.33-11.937 5.625-18.387s-1.84-13.273-6.795-17.414c-5.407-4.52-13.28-5.122-20.06-3.2s-12.706 6.027-18.372 10.217c-34.13 25.239-65.57 55.013-89.704 89.933Z"
            ></path>
            <path
              fill="#fff"
              d="m859.868 378.532-25.28 20.305-25.28 20.305c-8.006 6.43-16.007 12.868-24.108 19.18-8.03 6.255-16.159 12.387-24.48 18.252-8.308 5.857-16.809 11.448-25.566 16.613q-1.636.965-3.284 1.91c-.76.436-1.494-.717-.728-1.157 8.82-5.06 17.38-10.559 25.738-16.347 8.367-5.795 16.533-11.876 24.586-18.097 8.097-6.254 16.082-12.652 24.06-19.058q12.594-10.114 25.187-20.23l25.28-20.305 3.146-2.527c.684-.55 1.409.61.729 1.156Z"
            ></path>
            <path
              fill="#2f2e41"
              d="M215.933 146.87v.01l-8.34 6.97-57.35 12.74a14.497 14.497 0 1 0 10.87 26.88l36.53-6.15a44.821 44.821 0 0 0 5.98-1.42c.77-.23 1.53-.49 2.28-.76a233.32 233.32 0 0 1 13.62-41.26Z"
            ></path>
            <path
              fill="#a0616a"
              d="m692.273 182.07-7.95-.05-4.25-.02-24.35-42.57a11.93 11.93 0 0 0 .53-1.37c2.71-8.36-4.44-14.11-11.25-13.99a9.838 9.838 0 0 0-2.3.27 234.216 234.216 0 0 1 26.57 78.16 13.584 13.584 0 0 0 2.11.42 45.065 45.065 0 0 0 11.14-.38c4.96-.63 9.65-1.52 12.15-1.33Z"
            ></path>
            <path
              fill="#5392f0"
              d="m718.483 182.88-29.22-4.06a4.505 4.505 0 0 0-4.94 3.2 4.585 4.585 0 0 0-.14.64l-2.34 16.83a4.527 4.527 0 0 0 3.83 5.08l29.22 4.06a13 13 0 1 0 3.59-25.75Z"
            ></path>
            <path
              fill="#3f3d56"
              d="M671.383 202.92a235.262 235.262 0 0 0-26.38-78.85 238.286 238.286 0 0 0-429.07 22.8v.01a234.621 234.621 0 0 0-12.31 39.02 239.915 239.915 0 0 0-5.69 52.1 238 238 0 0 0 476 0 241.448 241.448 0 0 0-2.55-35.08ZM435.933 474c-130.13 0-236-105.87-236-236a234.593 234.593 0 0 1 19.59-94.12C255.943 60.45 339.243 2 435.933 2c88.95 0 166.56 49.47 206.77 122.34a234.216 234.216 0 0 1 26.57 78.16 237.519 237.519 0 0 1 2.66 35.5c0 130.13-105.87 236-236 236Z"
            ></path>
            <path
              fill="#3f3d56"
              d="M358.683 214a49.992 49.992 0 1 1 35.123-14.409A49.718 49.718 0 0 1 358.683 214Zm0-98a48.003 48.003 0 1 0 48 48 48.054 48.054 0 0 0-48-48Zm154 98a50 50 0 1 1 50-50 50.056 50.056 0 0 1-50 50Zm0-98a48 48 0 1 0 48 48 48.054 48.054 0 0 0-48-48Z"
            ></path>
            <path
              fill="#3f3d56"
              d="M393.103 198.88a49.012 49.012 0 0 1-68.84 0 38.013 38.013 0 0 1 68.84 0Zm154 0a49.012 49.012 0 0 1-68.84 0 38.013 38.013 0 0 1 68.84 0ZM403.683 246c0-5.523 17.909-10 40-10s40 4.477 40 10-17.909 26-40 26-40-20.477-40-26Z"
            ></path>
            <circle cx="310.183" cy="227.5" r="17" fill="#ff6584"></circle>
            <circle cx="561.683" cy="228" r="17" fill="#ff6584"></circle>
            <path
              fill="#ffb8b8"
              d="m197.859 463.363 12.26-.001 5.832-47.288-18.094.001.002 47.288z"
            ></path>
            <path
              fill="#2f2e41"
              d="m233.763 476.745-38.53.002-.001-14.887h23.643a14.887 14.887 0 0 1 14.888 14.885Z"
            ></path>
            <path
              fill="#ffb8b8"
              d="m136.859 463.363 12.26-.001 5.832-47.288-18.094.001.002 47.288z"
            ></path>
            <path
              fill="#2f2e41"
              d="m172.763 476.745-38.53.002-.001-14.887h23.643a14.887 14.887 0 0 1 14.888 14.885Zm28.447-206.114 10.777 85.386q2.222 17.608 3.11 35.346L218 449.43a4 4 0 0 1-3.995 4.2h-16.356a4 4 0 0 1-3.955-3.4l-14.71-96.913a2 2 0 0 0-3.944-.067l-17.721 94.917a4 4 0 0 1-3.626 3.184l-15.054.955a4 4 0 0 1-4.29-4.114l4.86-155.562Z"
            ></path>
            <circle cx="153.462" cy="124.45" r="24.561" fill="#ffb8b8"></circle>
            <path
              fill="#5392f0"
              d="M134.21 294.631c6 14 32 24 38 4 4.64-15.46 23.02-21.96 31.13-24.11a4.016 4.016 0 0 0 2.86-4.86l-22.67-89.05a31.272 31.272 0 0 0-21.06-22.16c-18.02-5.58-37.02 5.91-40.07 24.52a137.157 137.157 0 0 0-1.59 15.76c-1.88 39.29 9.45 86.68 13.4 95.9Z"
            ></path>
            <path
              fill="#ffb8b8"
              d="M270.631 214.407a10.056 10.056 0 0 0-14.864 4.1l-35.577-3.354 8.722 16.393 32.448.672a10.11 10.11 0 0 0 9.271-17.811Z"
            ></path>
            <path
              fill="#2f2e41"
              d="M252.939 232.639a4.505 4.505 0 0 1-3.352 1.493l-46.44-1.062a46.373 46.373 0 0 1-30.546-11.513l-27.846-24.421a14.497 14.497 0 1 1 13.956-25.413l46.118 36.391 44.903 8.654a4.515 4.515 0 0 1 3.41 3.886l.923 8.492a4.506 4.506 0 0 1-.52 2.634 4.455 4.455 0 0 1-.606.859ZM134.82 144.54a4.007 4.007 0 0 0 5.902-2.37l.014-.055c.446-1.864.076-3.81-.052-5.723s.059-4.013 1.361-5.42c2.428-2.62 6.748-1.231 10.259-1.894a8.664 8.664 0 0 0 6.74-9.253 13.53 13.53 0 0 0-.216-1.193 6.673 6.673 0 0 1 6.926-8.081c3.548.203 7.378 1.278 10.314-1.35a7.608 7.608 0 0 0 1.826-8.202c-1.676-4.838-6.413-7.37-11.101-8.763a40.62 40.62 0 0 0-34.43 5.65c-2.962 2.086-5.727 4.71-6.99 8.105s-.653 7.68 2.193 9.922a18.332 18.332 0 0 0-4.246 17.807c1.406 4.529 8.115 8.872 11.5 10.82Z"
            ></path>
            <path
              fill="#a0616a"
              d="M664.132 463.174h-12.259l-5.833-47.288 18.095.001-.003 47.287z"
            ></path>
            <path
              fill="#2f2e41"
              d="M643.116 461.67h23.643v14.888h-38.53a14.887 14.887 0 0 1 14.887-14.887Z"
            ></path>
            <path
              fill="#a0616a"
              d="M751.132 463.174h-12.259l-5.833-47.288 18.095.001-.003 47.287z"
            ></path>
            <path
              fill="#2f2e41"
              d="M730.116 461.67h23.643v14.888h-38.53a14.887 14.887 0 0 1 14.887-14.887Zm-65.776-27.784c-.134 0-.267-.005-.402-.016l-17.351-1.389a5 5 0 0 1-4.538-5.782l26.308-162.72 1.762-22.951a4.972 4.972 0 0 1 3.917-4.501l26.461-5.788a4.968 4.968 0 0 1 5.195 2.06l6.452 9.431a110.4 110.4 0 0 0 8.245 10.509c4.578 5.214 12.362 16.79 13.06 35.735a126.608 126.608 0 0 0 1.934 18.554l21.303 114.76a4.998 4.998 0 0 1-4.439 5.765L735.8 428.8a4.98 4.98 0 0 1-5.302-3.68L701.32 316.619a1 1 0 0 0-1.932.003l-30.22 113.55a5.005 5.005 0 0 1-4.829 3.714Z"
            ></path>
            <circle
              cx="710.482"
              cy="132.435"
              r="24.561"
              fill="#a0616a"
            ></circle>
            <path
              fill="#5392f0"
              d="m668.853 244.72-.509-35.074c-1.87-22.432 8.064-34.21 16.728-40.136a19.919 19.919 0 0 1 15.404-2.948l19.33 4.179a20.372 20.372 0 0 1 13.054 9.297 19.02 19.02 0 0 1 2.172 15.008 20.597 20.597 0 0 1-8.4 11.502c-16.608 11.724-17.778 31.419-17.788 31.617l-.02.407Z"
            ></path>
            <path
              fill="#a0616a"
              d="M615.206 224.212a11.036 11.036 0 0 1-16.496.478c-9.687-10.16 6.147-25.413 15.87-15.233a10.678 10.678 0 0 1 .953 1.12l49.028-1.218 5.852-10.703 17.985 6.983c-3.453 5.355-7.417 26.37-16.448 25.347-1.184.032-55.533-6.687-56.744-6.774Z"
            ></path>
            <path
              fill="#5392f0"
              d="m680.793 216.114-13.705-10.058a4.505 4.505 0 0 1-.965-6.29l17.453-23.783a13 13 0 1 1 20.961 15.383l-17.453 23.783a4.505 4.505 0 0 1-6.29.965Z"
            ></path>
            <path
              fill="#2f2e41"
              d="M704.512 126.296a40.094 40.094 0 0 1-10.717 1.846c-3.637-.042-7.416-1.197-9.872-3.88-3.488-3.81-3.442-10.016-.742-14.42s7.545-7.148 12.556-8.404 10.244-1.197 15.41-1.127c6.133-4.472 15.076-3.792 21.37.452s10.14 11.436 11.773 18.849 1.276 15.109.657 22.674c-.34 4.146.008 9.529 3.969 10.8 2.5.802 5.2-.67 6.992-2.589s3.042-4.303 4.914-6.143c3.99-3.92 10.392-4.716 15.663-2.842s9.476 6.045 12.44 10.789a37.538 37.538 0 0 1-42.627 55.845c-13.524-4.06-23.735-15.475-30.305-27.974a92.386 92.386 0 0 1-10.019-52.422Z"
            ></path>
            <path
              fill="#3f3d56"
              d="M870 477H1a1 1 0 0 1 0-2h869a1 1 0 0 1 0 2Z"
            ></path>
          </svg>
        </div>
        <!-- 登录框 -->
        <div class="login-box">
          <div class="login-form">
            <svg
              data-v-371e2d49=""
              xmlns="http://www.w3.org/2000/svg"
              width="32"
              height="32"
              class="icon avatar"
              viewBox="0 0 1024 1024"
            >
              <path
                fill="#386BF3"
                d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109z"
              ></path>
              <path
                fill="#C3D2FB"
                d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665z"
              ></path>
              <path
                fill="#303F5B"
                d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.114 323.114 0 0 1-107.769-242.852z"
              ></path>
            </svg>
            <div
              data-v-371e2d49=""
              style="transform: translateZ(0px); opacity: 1"
            >
              <h2 data-v-371e2d49="" class="outline-none">
                <span class="type-it" data-typeit-id="6810526">
                  CJia520のAdmin
                  <span class="ti-cursor" style="visibility: hidden"></span>
                </span>
              </h2>
            </div>
            <!-- 登录参数 -->
            <el-form ref="ruleFormRef" :model="loginForm" :rules="rules">
              <div class="transit">
                <el-form-item prop="username">
                  <el-input
                    size="large"
                    :prefix-icon="UserFilled"
                    v-model="loginForm.username"
                    clearable
                  />
                </el-form-item>
              </div>
              <div class="transit">
                <el-form-item prop="password">
                  <el-input
                    size="large"
                    :prefix-icon="Lock"
                    v-model="loginForm.password"
                    show-password
                    clearable
                  />
                </el-form-item>
              </div>
              <div class="transit">
                <el-form-item prop="code">
                  <el-col :span="16">
                    <el-input
                      v-model="loginForm.code"
                      class="w-40 m-1"
                      placeholder="请输入验证码"
                      size="large"
                      :prefix-icon="Select"
                      clearable
                    />
                  </el-col>
                  <img
                    @click="overCaptcha"
                    :src="captchaImg"
                    alt=""
                    class="captcha"
                  />
                </el-form-item>
              </div>
              <div class="transit">
                <el-form-item>
                  <el-checkbox label="记住密码" size="large" />
                  <el-button style="width: 100%" type="primary" @click="login"
                    >登录</el-button
                  >
                </el-form-item>
              </div>
              <div class="transit">
                <el-form-item>
                  <div class="third">
                    <el-button style="width: 112px">手机登录</el-button>
                    <el-button style="width: 112px">二维码登录</el-button>
                    <el-button style="width: 112px">注册</el-button>
                  </div>
                </el-form-item>
              </div>
              <div class="transit">
                <el-form-item>
                  <div
                    class="el-divider el-divider--horizontal"
                    role="separator"
                    data-v-77aa084e=""
                    style="--el-border-style: solid"
                  >
                    <div class="el-divider__text is-center">
                      <p class="text-gray-500 text-xs" data-v-77aa084e="">
                        第三方登录
                      </p>
                    </div>
                  </div>
                  <div class="w-full flex justify-evenly" data-v-77aa084e="">
                    <span title="微信登录" data-v-77aa084e=""
                      ><svg
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        aria-hidden="true"
                        role="img"
                        class="cursor-pointer text-gray-500 hover:text-blue-400 iconify iconify--ri"
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        data-v-77aa084e=""
                        style="outline: none"
                      >
                        <path
                          fill="currentColor"
                          d="M18.575 13.711a.91.91 0 0 0 .898-.898a.895.895 0 0 0-.898-.898a.894.894 0 0 0-.898.898c0 .5.4.898.898.898Zm-4.425 0a.91.91 0 0 0 .898-.898c0-.498-.4-.898-.898-.898a.894.894 0 0 0-.898.898c0 .5.399.898.898.898Zm6.567 5.04a.347.347 0 0 0-.172.37c0 .048 0 .098.025.147c.098.417.294 1.081.294 1.106c0 .073.025.122.025.172a.22.22 0 0 1-.221.22c-.05 0-.074-.024-.123-.048l-1.449-.836a.8.8 0 0 0-.344-.098c-.073 0-.147 0-.196.024c-.688.197-1.4.295-2.161.295c-3.66 0-6.607-2.457-6.607-5.505c0-3.047 2.947-5.505 6.607-5.505c3.659 0 6.606 2.458 6.606 5.505c0 1.647-.884 3.146-2.284 4.154ZM16.674 8.099a9.112 9.112 0 0 0-.28-.005c-4.174 0-7.606 2.86-7.606 6.505c0 .554.08 1.09.228 1.6h-.089a9.966 9.966 0 0 1-2.584-.368c-.074-.025-.148-.025-.222-.025a.832.832 0 0 0-.419.123l-1.747 1.005a.35.35 0 0 1-.148.05a.273.273 0 0 1-.27-.27c0-.074.024-.123.049-.197c.024-.024.246-.834.369-1.324c0-.05.024-.123.024-.172a.556.556 0 0 0-.221-.441C2.059 13.376 1 11.585 1 9.598C1.001 5.944 4.571 3 8.951 3c3.765 0 6.93 2.169 7.723 5.098Zm-5.154.418c.573 0 1.026-.477 1.026-1.026c0-.573-.453-1.026-1.026-1.026s-1.026.453-1.026 1.026s.453 1.026 1.026 1.026Zm-5.26 0c.573 0 1.027-.477 1.027-1.026c0-.573-.454-1.026-1.027-1.026c-.572 0-1.026.453-1.026 1.026s.454 1.026 1.026 1.026Z"
                        ></path></svg></span
                    ><span title="支付宝登录" data-v-77aa084e=""
                      ><svg
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        aria-hidden="true"
                        role="img"
                        class="cursor-pointer text-gray-500 hover:text-blue-400 iconify iconify--ri"
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        data-v-77aa084e=""
                        style="outline: none"
                      >
                        <path
                          fill="currentColor"
                          d="M21.422 15.358c-3.83-1.153-6.055-1.84-6.678-2.062a12.41 12.41 0 0 0 1.32-3.32H12.8V8.872h4v-.68h-4V6.344h-1.536c-.28 0-.312.248-.312.248v1.592H7.2v.68h3.752v1.104H7.88v.616h6.224a10.972 10.972 0 0 1-.888 2.176c-1.408-.464-2.192-.784-3.912-.944c-3.256-.312-4.008 1.48-4.128 2.576C5 16.064 6.48 17.424 8.688 17.424s3.68-1.024 5.08-2.72c1.167.558 3.338 1.525 6.514 2.902A9.99 9.99 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10a9.983 9.983 0 0 1-.578 3.358Zm-12.99 1.01c-2.336 0-2.704-1.48-2.584-2.096c.12-.616.8-1.416 2.104-1.416c1.496 0 2.832.384 4.44 1.16c-1.136 1.48-2.52 2.352-3.96 2.352Z"
                        ></path></svg></span
                    ><span title="QQ登录" data-v-77aa084e=""
                      ><svg
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        aria-hidden="true"
                        role="img"
                        class="cursor-pointer text-gray-500 hover:text-blue-400 iconify iconify--ri"
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        data-v-77aa084e=""
                        style="outline: none"
                      >
                        <path
                          fill="currentColor"
                          d="M19.914 14.529a32.024 32.024 0 0 0-.676-1.886l-.91-2.246c.002-.026.013-.468.013-.696C18.34 5.86 16.508 2 12 2C7.494 2 5.66 5.86 5.66 9.7c0 .229.011.671.012.697l-.91 2.246a31.99 31.99 0 0 0-.675 1.886c-.86 2.737-.581 3.87-.369 3.895c.455.054 1.771-2.06 1.771-2.06c0 1.224.637 2.822 2.016 3.976c-.515.157-1.147.399-1.554.695c-.365.267-.319.54-.253.65c.289.481 4.955.307 6.303.157c1.347.15 6.014.324 6.302-.158c.066-.11.112-.382-.253-.649c-.407-.296-1.039-.538-1.555-.695c1.379-1.154 2.016-2.752 2.016-3.977c0 0 1.316 2.115 1.771 2.06c.212-.025.49-1.157-.37-3.894Z"
                        ></path></svg></span
                    ><span title="微博登录" data-v-77aa084e=""
                      ><svg
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        aria-hidden="true"
                        role="img"
                        class="cursor-pointer text-gray-500 hover:text-blue-400 iconify iconify--ri"
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        data-v-77aa084e=""
                        style="outline: none"
                      >
                        <path
                          fill="currentColor"
                          d="M4.278 8.592c2.773-2.77 6.004-4.033 7.219-2.816c.537.537.588 1.464.244 2.572c-.178.557.524.25.524.25c2.241-.938 4.197-.994 4.91.027c.38.542.343 1.306-.008 2.19c-.163.407.048.47.36.563c1.262.392 2.668 1.336 2.668 3.004c0 2.763-3.98 6.239-9.964 6.239c-4.565 0-9.23-2.213-9.23-5.852c0-1.902 1.204-4.102 3.277-6.177Zm12.133 5.742c-.237-2.391-3.382-4.039-7.023-3.677c-3.64.359-6.403 2.59-6.167 4.98c.237 2.394 3.382 4.039 7.023 3.68c3.641-.362 6.401-2.592 6.167-4.983Zm-10.249.104c.754-1.528 2.712-2.39 4.446-1.94c1.792.463 2.707 2.154 1.976 3.799c-.744 1.683-2.883 2.58-4.695 1.994c-1.752-.566-2.493-2.295-1.727-3.853Zm2.715.578c-.563-.237-1.291.008-1.64.553c-.354.547-.189 1.201.371 1.456c.568.257 1.325.013 1.676-.55c.346-.568.163-1.217-.408-1.459Zm1.387-.578c-.216-.084-.486.018-.613.232c-.123.214-.054.458.163.547c.219.092.501-.012.628-.231c.123-.22.044-.466-.178-.548Zm5.694-11.514A5.831 5.831 0 0 1 21.5 4.72a5.836 5.836 0 0 1 1.22 5.704a.838.838 0 0 1-1.06.54a.844.844 0 0 1-.542-1.062a4.142 4.142 0 0 0-4.808-5.327a.845.845 0 0 1-.353-1.65Zm.626 2.926a2.836 2.836 0 0 1 3.29 3.648a.725.725 0 1 1-1.378-.45a1.38 1.38 0 0 0-.287-1.357a1.395 1.395 0 0 0-1.322-.426a.723.723 0 1 1-.303-1.415Z"
                        ></path>
                      </svg>
                    </span>
                  </div>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { UserFilled, Lock, Select } from "@element-plus/icons-vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import loginApi from "../../request/apis/login";
// 导入pinia
import { useUserStore } from "../../store/user";
const userStore = useUserStore();
// 导入路由
import { useRouter } from "vue-router";
const router = useRouter();

const ruleFormRef = ref<FormInstance>();
// 登录参数
const loginForm = ref({
  username: "test",
  password: "123.test",
  code: "",
  key: 0,
});
// 校验规则
const rules = reactive<FormRules>({
  username: [
    { required: true, message: "请输入登录账号", trigger: "blur" },
    { min: 5, max: 16, message: "登录账号格式有误", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入登录密码", trigger: "blur" },
    { min: 5, max: 16, message: "登录密码格式有误", trigger: "blur" },
  ],
  code: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { min: 1, max: 3, message: "验证码格式有误", trigger: "blur" },
  ],
});

const captchaFlag = ref(true);
const captchaImg = ref("");
const getCaptcha = () => {
  loginApi.captcha().then((res) => {
    captchaImg.value = res.result.image_base;
    loginForm.value.key = res.result.key;
    if (res.code == 200) {
      captchaFlag.value = false;
    }
  });
};
// 切换验证码
const overCaptcha = () => {
  getCaptcha();
};
// 登录
const login = () => {
  loginApi.login(loginForm.value).then((res) => {
    if (res.code != 200) {
      ElMessage({
        showClose: true,
        message: res.message,
        type: "error",
      });
      overCaptcha();
      return;
    }
    // 保存token
    userStore.setToken(res.result.token);
    ElMessage({
      showClose: true,
      message: res.message,
      type: "success",
    });
    setTimeout(() => {
      // 跳转首页
      router.push({
        path: "/",
      });
    });
  });
};

onMounted(() => {
  getCaptcha();
});
</script>

<style scoped>
.app {
  width: 100%;
  height: 100vh;
}

.wave {
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  z-index: -1;
  animation: searchbox 2s;
}

.login-container {
  grid-gap: 18rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 100vh;
  padding: 0 2rem;
  width: 100vw;
}

.login-container .img {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  animation: searchbox 2s;
}

.login-container .login-box {
  align-items: center;
  display: flex;
  text-align: center;
}

.login-form {
  width: 360px;
}

.transit {
  width: 360px;
  animation: fadeInDown 2s;
}

.avatar {
  height: 80px;
  width: 350px;
  animation: fadeInDown 2s;
}

.login-form h2 {
  color: #999;
  font: 700 200% Consolas, Monaco, monospace;
  margin: 15px 0;
  text-transform: uppercase;
  animation: fadeInDown 2s;
}

.captcha {
  cursor: pointer;
  width: 104px;
  height: 40px;
  border-radius: 4px;
  margin-left: 15px;
}

.third {
  width: 100%;
  display: flex;
  justify-content: space-between;
  animation: fadeInDown 2s;
}

.el-divider--horizontal {
  border-top: 1px solid #dcdfe6;
  display: block;
  height: 1px;
  margin: 24px 0;
  width: 100%;
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.justify-evenly {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.justify-evenly span {
  cursor: pointer;
  color: #409eff;
}

.hover\:text-blue-400:hover {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

@keyframes fadeInDown {
  0% {
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes searchbox {
  0% {
    opacity: 0;
    transform: translateX(-60px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>